import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

const BarChart = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    const chartInstance = echarts.init(chartRef.current);

    const option = {
      title: {
        text: '提现金额/下单金额',
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: ['8月', '9月', '10月', '11月', '12月'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '提现金额',
          data: [120, 200, 150, 80, 70,],
          type: 'bar',
        },
        {
          name: '下单金额',
          data: [90, 180, 130, 100, 60],
          type: 'bar',
        },
      ],
    };

    chartInstance.setOption(option);

    return () => {
      chartInstance.dispose();
    };
  }, []);

  return <div ref={chartRef} style={{ width: '100%', height: '400px' }} />;
};

export default BarChart;